<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-model指令</title>
    <!--Vue中有两种数据绑定的方式： 
          1. v-bind 单向数据绑定:数据只能从data流向页面
          2. v-model 双向数据绑定：数据不仅能从data流向页面，还可以从页面流向data
            注：
                1.双向绑定一般用在表单类元素上，如input、select
                2.v-model:value可以简写为v-model，因为v-model默认收集的就是value值 -->
    <!-- 收集表单数据：
            1.<input type="text"/> v-model收集value值，用户输入的就是value值
            2.<input type="radio"/> v-model收集value值，要给标签配置value值
            3.<input type="checkbox"/> 
                1)没有配置标签的value值时收集checked值(选中true，未选中false)
                2)配置标签的value值时
                  2.1 v-model的初始值是数组，收集value组成的数组
                  2.2 v-model的初始值不是数组，收集checked
            4.v-model的修饰符
                1.lazy:失去焦点时再收集数据
                2.number:输入字符串转为有效的数字
                3.trim:过滤字符串首尾空格-->
  </head>

  <body>
    <div id="root">
      <input type="button" value="修改message" @click="changeMessage" />
      <input type="text" v-model="message" @keyup.enter="getMessage" />
      <h2>{{ message }}</h2>

      <h3>用户表单</h3>
      <!-- 提交时阻止默认行为（跳转页面），调用demo方法 -->
      <form @submit.prevent="demo">
        账号：<input type="text" v-model="userInfo.account" /><br /><br />
        密码：<input type="password" v-model="userInfo.password" /><br /><br />
        <!-- input类型为number保证输入为数字,v-model.number使输入字符串转为有效的数字 -->
        年龄：<input type="number" v-model.number="userInfo.age" /><br /><br />
        性别： 男<input
          type="radio"
          name="gender"
          value="male"
          v-model="userInfo.gender"
        />
        女<input
          type="radio"
          name="gender"
          value="female"
          v-model="userInfo.gender"
        />
        <br /><br />
        爱好： 学习<input
          type="checkbox"
          v-model="userInfo.hobby"
          value="study"
        />
        游戏<input type="checkbox" v-model="userInfo.hobby" value="game" />
        编程<input type="checkbox" v-model="userInfo.hobby" value="program" />
        <br /><br />
        所属地区
        <select v-model="userInfo.city">
          <option value="">请选择地区</option>
          <option value="hz1">杭州</option>
          <option value="tz">台州</option>
          <option value="hz2">湖州</option>
        </select>
        <br /><br />
        其他信息：
        <textarea v-model.lazy="userInfo.other"></textarea><br /><br />
        <input type="checkbox" v-model="userInfo.agree" />接收条款
        <a href="#">《用户需知》</a>
        <button>提交</button>
      </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      var vm = new Vue({
        el: "#root",
        data: {
          message: "mannoname",
          userInfo: {
            account: "",
            password: "",
            age: "",
            gender: "",
            hobby: [],
            city: "",
            other: "",
            agree: "",
          },
        },
        methods: {
          getMessage: function () {
            alert(this.message);
          },
          changeMessage: function () {
            this.message = "不知道的人";
          },
          demo() {
            console.log(this.userInfo);
          },
        },
      });
    </script>
  </body>
</html>
